<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

<style>
body{ background-color:#CFF;}
#tbody{ 
    width:1100px; 
	height: auto; 
	margin:0 auto; 
	padding-top: 10px;
}
#register{
	background-color: #FFF;
	width: 600px;
	margin: 100px auto;
	padding-top: 20px;
	padding-bottom: 30px;
	}
#registertitle{
	margin: 0;
	padding: 0;
	}
#registertitle img{
	width: 50px;
	height: 50px;
	vertical-align: middle;
	}
#registertitle span{
    display: block;
	}
#rediv2{
	width: 400px;
	margin: 0 auto;	
	overflow: hidden
	}
#formregister dt{
	float: left;
	margin:10px;
	width: 110px;
	vertical-align: middle;
	display: inline-block;
	height: 25px;
	 text-align:justify;
     text-align-last:justify;
}
#formregister dt:after{
     display:inline-block;
     overflow:hidden;
     width:100%;
     height:0;
     content:'';
     vertical-align: middle;
}
#formregister dd{
	float: left;
	margin:10px;
	width: 240px;
	height: 25px;

	}
#formregister p{
	margin: 0;
	padding: 0;
	}
#formregister input{
     width: 180px;
	}




.error{
	color:red;
}






</style>

<script type="text/javascript" src="../js/jQueryValidate20161108/style/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../js/jQueryValidate20161108/style/js/validate-1.14.0.min.js"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交注册信息!");
    }
});
$().ready(function() {

$(function(){
  $('#fore').validate({
		rules:{
			username:{
				required:true
			},
			pw01:{
				required:true,
				rangelength:[8,10]
			},
			pw02:{
				required:true,
				equalTo:'#password'
			}
		},
		messages:{
			username:{
				required:'请输入一个用户名'
			},
			pw01:{
				required:'请设置一个密码',
				rangelength:'密码位数为8到10位'
			},
			pw02:{
				required:'请再次确认密码',
				equalTo:'两次输入密码不相符'
			}
		}
	});	
  });
});
</script>

</head>

<body>
<div id="tbody">
  <div id="register">
         <div style=" margin: 0 auto; width: 200px;"><p id="registertitle"><span><img src="../img/head-logo.jpg" />　<strong>新用户注册</strong></span></p></div>
        <div id="rediv2">
          <form method="post" action="" id="fore"> 
          <dl>
                <dt>用户名</dt><dd><p><input id="username" name="username" type="text" placeholder="手机号或邮箱" ><span class="error">*</span></p></dd>
                <dt>密码</dt><dd><p><input id="pw01" name="pw01" type="password" placeholder="请输入密码"><span class="error">*</span></p></dd>
                <dt>重复密码</dt><dd><p><input id="pw02" name="pw02" type="password" placeholder="请再次输入密码"><span class="error">*</span></p></dd>
                <dt>头像</dt><dd><p><input id="picture" name="picture" type="text" placeholder="图片小于100k"><span class="error"></span></p></dd>
           
                <dt>密保问题一</dt><dd><select id="s01" name="s01">
                                 <option value="">请选择密保问题</option>
                                 <option value="我最喜欢的一本书">我最喜欢的一本书</option>
                                 <option value="我最喜欢的水果">我最喜欢的水果</option>
                                 <option value="我最喜欢的一首歌">我最喜欢的一首歌</option>
                              </select>
                              <span class="error">*</span>
                              </dd>
                <dt>我的答案</dt><dd><p><input id="ss01" name="ss01" type="text" placeholder=""><span class="error">*</span></p></dd>
                <dt>密保问题二</dt><dd><select id="s02" name="s02">
                                 <option value="">请选择密保问题</option>
                                 <option value="我的高中是哪所学校">我的高中是哪所学校</option>
                                 <option value="我高中时暗恋谁">我高中时暗恋谁</option>
                                 <option value="高中语文老师性别">高中语文老师性别</option>
                              </select>
                              <span class="error">*</span>
                              </dd>
                <dt>我的答案</dt><dd><p><input id="ss02" name="ss02" type="text" placeholder=""><span class="error">*</span></p></dd>

           </dl>
            <div style=" margin: 0 auto; width: 200px;"><input type="submit"  value="注册" ></div>
           </form>
         </div>
    
    </div>
 </div>
</body>
</html>

























